<template>
	<!-- 头像组 -->
	<view class="group-avatar">
		<view v-if="avatarType === 'group'" class="group-avatar__header">
			<view v-for="avatar in avatarList.slice(0, 4)" :key="avatar" class="group-item__avatar-box"
				:class="computedAvatar" :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }">
				<image class="group-item__avatar-image" :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }"
					:src="avatar" mode="aspectFill">
				</image>
			</view>
		</view>
		<view v-else class="group-item__avatar-box">
			<image class="group-item__avatar-image" :src="avatarList?.[0]" mode="aspectFill">
			</image>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onBeforeMount,
	} from 'vue';

	const avatarWidth = 45;
	let imageWidth = ref(50);
	let {
		avatarList,
		type,
	} = defineProps({
		avatarList: Array,
		type: String,
	});

	let avatarType = ref('group');

	let computedAvatar = computed((id) => {
		if (avatarList.length > 1) {
			imageWidth.value = avatarWidth * 0.49;
			return 'avatarItem--2';
		} else {
			imageWidth.value = avatarWidth;
			return 'avatarItem--1';
		}
	});

	onBeforeMount(() => {
		if ((type ?? 'group') != 'group') {
			avatarType.value = type;
		}
	})
</script>

<style lang="scss" scoped>
	.group-avatar {
		position: relative;
	}

	.group-avatar__header {
		/* #ifndef APP-NVUE */
		display: flex;
		align-content: center;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap-reverse;
		/* #ifdef APP-NVUE */
		width: 50px;
		height: 50px;
		/* #endif */
		/* #ifndef APP-NVUE */
		width: 45px;
		height: 45px;
		/* #endif */

		border-radius: 5px;
		border-color: #eee;
		border-width: 1px;
		border-style: solid;
		background-color: #DCDDDF;
		overflow: hidden;
	}

	.group-item__avatar-box {
		/* #ifdef APP-NVUE */
		width: 50px;
		height: 50px;
		/* #endif */
		overflow: hidden;
		border-radius: 2px;
	}

	.group-item__avatar-image {
		margin: 1px;
		/* #ifdef APP-NVUE */
		width: 50px;
		height: 50px;
		/* #endif */
		/* #ifndef APP-NVUE */
		width: $avatar-width;
		height: $avatar-width;
		/* #endif */
	}

	/* #ifndef APP-NVUE */
	.group-item__avatar-image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.avatarItem--1 {
		width: 100%;
		height: 100%;
	}

	.avatarItem--2 {
		width: 49%;
		height: 49%;
	}

	/* #endif */
</style>
